<template>
	<view :style="{'--color':color}">
		<status-bar title=' ' hideBg="1" statusHeight backColor :back="back"></status-bar>
		<swiper class="Swiper" :indicator-dots="false" :autoplay="false" 
		        circular :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in banner" :key="index">
				<image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
			</swiper-item>
		
		</swiper>
		
		
		<view class="Nav">
			<view class="flex-1">
				<u-tabs :list="open_date"  @click="click" lineColor="#d7b06d"
				       :inactiveStyle="inactiveStyle" :activeStyle="activeStyle" 
					   :lineHeight="1" :lineWidth="40" :current="current"></u-tabs>
			</view>
			<view class="allNav" @click.stop="show = true">全部</view>
		</view>
		
		<view class="botBox" v-for="(item,index) in site_time" :key="index" v-if="current == index">
			<view class="listBox " v-for="(subItem,subIndex) in item" :key="subIndex" >
				<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="subItem_img"></image>
				<view class="flex-1 conList">
					<text class="title">{{subItem.name}}</text>
					<text class="time">开宴时间：{{subItem.open_time}}</text>
					<view class="row" v-if="subItem.price_info.length">
						<view class="privce_list" v-for="(tItem,tIndex) in subItem.all_price_info" :key="tIndex">
							<text class="privce_discount">{{tItem.data}}</text>
							<text class="privce_Origina" v-if="tItem.full_price">{{tItem.full_price}}</text>
						</view>
						
					</view>
					<view class="d-flex a-center">
						<text class="Remaining">座席剩余:{{subItem.available_site}}</text>
						<text class="Remaining">妆造剩余:{{subItem.make_up_num}}</text>
					</view>
				</view>
				<view class="Nowreserve" @click="NowReserve(subItem)">立即预定</view>
			</view>
		</view>
		
		
		
		<u-calendar :show="show"  ref="calendar" :showSubtitle="false"  
		       mode="single" :color="color"  
			   :defaultDate="customList[current]"
			   :customList="customList"
			   monthNum="2"  @confirm="confirm" @close="show = false">
		</u-calendar>
		
		
		
		
		<u-popup :show="showContent"  mode="center" :round="10" 
		 :safeAreaInsetBottom="false">
		            <view class="sowCone">
		                <text class="row j-centert black size34 bold">预定须知</text>
						<view class="cponView">
							<u-parse :content="site_config.content"></u-parse>
						</view>
						<view class="botFot">
							<view class="notconti" @click="ageBtn">
								<text class="black size28">我已阅读并同意此协议</text>
								<text class="size28 black" v-if="ageTime > 0">({{ageTime}}s)</text>
							</view>
						</view>
		            </view>
		</u-popup>
		
		
		<u-popup :show="isOk" mode="center" :round="10"  :safeAreaInsetBottom="false">
		            <view class="sowCone" v-if="reconfirmData">
		                <text class="size32 bold black p-top10 p-bot10 t-letter4">您想预订的餐秀</text>
						<view class="row a-center color_33 size28 p-top12">宴会日期：{{open_date[current].name}}</view>
						<view class="row a-center color_33 size28 p-top12">宴会名称：{{reconfirmData.name}} </view>
						<view class="row a-center color_33 size28 p-top12">开宴时间：{{reconfirmData.open_time}} </view>
						<view class="row a-center color_33 size28 p-top12">宴席剩余：{{reconfirmData.available_site}}</view>
						<view class="row a-center color_33 size28 p-top12">装造剩余：{{reconfirmData.make_up_num}}</view>
						<view class="row j-sa a-center m-top30 m-bot10">
							<view class="okbtn Cancel" @click="isOk = false">取消</view>
							<view class="okbtn Continue" @click="Config_btn">确定</view>
						</view>
		            </view>
		</u-popup>
		
		<showModel @cancelFunc='showModal = false' goHome='0' v-if='showModal' type='2'></showModel>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				showModal:false,
				banner:[],
				customList:[],
				open_date:[],
				site_time:[],
				current:0,
				inactiveStyle:{
					fontSize:'12px',
					color:'#606266'
				},
				activeStyle:{
					fontSize:'13px',
					color:'#000',
					fontWeight:'bold'
				},
				show:false,
				showContent:false,
				color:'#d7b06d',
				site_config:'',
				ageTime:3,
				ageFlge:false,
				ageDown:null,
				ageId:'',
				isOk:false,
				reconfirmData:'',
			}
		},
		
		onLoad() {
			this.getSiteTimeList();
		},
	
		methods: {
			getSiteTimeList(){
				this.$http.get({
					url:'/SiteApi/getSiteTimeList',
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					const Result = res.data;
					this.site_config = Result.site_config;
					this.banner = Result.banner || [];
					this.customList = Result.open_calender || [];
					this.open_date = Result.open_date || [];
					this.site_time = Result.site_time_day_time || [];
					this.showContent = true;
					this.ageDown = setInterval(()=>{
						if(this.ageTime > 0){
							this.ageTime--;
						}else{
							clearInterval(this.ageDown);
						}
					},1000)
				})
			},
			NowReserve(reconfirmData){
				if(!this.vid) return this.showModal = true;
				this.reconfirmData = reconfirmData
				this.isOk = true
				
			},
			click(e){
				this.current = e.index;
			},
			
			confirm(e){
				const Index = this.customList.findIndex(n=>n == e[0]);
				this.current = Index;
				this.show = false;
			},
			
			ageBtn(){
				if(this.ageTime > 0) return;
				this.showContent = false;
			},
			CloseAge(){
				clearInterval(this.ageDown);
				this.showContent = false;
				this.ageTime = 3;
			},
			Config_btn(){
				this.isOk = false
				this.toUrl(`Selectseat?id=${this.reconfirmData.id}`)
			}
		},
		onUnload() {
			clearInterval(this.ageDown);
			this.showContent = false;
		},
		onHide() {
			clearInterval(this.ageDown);
			this.showContent = false;
		},
		
		computed:{
			...mapState(['vid'])
		}
	}
</script>

<style lang="scss" scoped>
   page{
	   background-color: #f7efe2;
   }
   .sowCone{
	   width:620rpx;
	   padding:20rpx;
	   display: flex;
	   flex-direction: column;
	   align-items: center;
   }
   .cponView{
	   width:100%;
	   height: 760rpx;
	   overflow-y: scroll;
	   padding:30rpx 10rpx;
   }
   .botFot{
	   width:100%;
	   height: 130rpx;
	   display: flex;
	   justify-content: center;
	   align-items: center;
   }
   .notconti{
	   width:500rpx;
	   height: 90rpx;
	   background-color: #d7b06d;
	   border-radius: 10rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
   }
   
   .Swiper{
	   width:100%;
	   height: 750rpx;
   }
   .Swiper swiper-item{
	   width:100%;
	   height: 100%;
   }
   .Nav{
	   width:100%;
	   height: 100rpx;
	   background-color: #f7efe2;
	   margin-top:-20rpx;
	   position: relative;
	   z-index:100;
	   border-radius: 20rpx 20rpx 0 0;
	   display: flex;
	   align-items: center;
	   
   }
   .allNav{
	  color: rgb(96, 98, 102);
	   padding:0 16rpx;
	   font-size:24rpx;
   }
   .botBox{
	   padding-bottom: 30rpx;
   }
   .listBox{
	   width:100%;
	   padding:20rpx 24rpx;
	   display: flex;
	   align-items: center;
	   border-bottom: 1rpx solid #ddd;
	  
   }
   .subItem_img{
	   width:90rpx;
	   height: 90rpx;
	   border-radius: 10rpx;
	   margin-right:20rpx;
	   
   }
   .conList{
	   display: flex;
	   flex-direction: column;
   }
   .Nowreserve{
	   width:160rpx;
	   height: 60rpx;
	   background-color: var(--color);
	   color:#333;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   border-radius: 10rpx;
	   font-size:22rpx;
	   margin-left:10rpx;
   }
   .title{
	   color:#000;
	   font-size:26rpx;
	   font-weight: bold;
   }
   .time{
	   color:#999;
	   font-size:20rpx;
	   margin-top:4rpx;
   }
   .privce_list{
	
	   padding: 8rpx 18rpx;
	   border:2rpx solid var(--color);
	   background-color: rgba(255, 230, 189, 0.5);
	   border-radius: 10rpx;
	   display: flex;
	   flex-direction: column;
	   margin-right:10rpx;
	   margin-top:8rpx;
   }
   .privce_discount{
	    font-size:22rpx;
   }
   .privce_Origina{
	   font-size:22rpx;
	   color:#999;
	   margin-top:2rpx;
	   text-decoration: line-through;
   }
   .Remaining{
	   color:#000;
	   font-size:22rpx;
	   margin-right:16rpx;
	   margin-top:6rpx;
   }
   /deep/.u-calendar-month__title{
	   display: none !important;
   }
   .okbtn{
	   width:260rpx;
	   height: 80rpx;
	   border-radius: 10rpx;
	   display: flex;
	   justify-content: center;
	   align-items: center;
	   font-size:30rpx;
   }
   .Cancel{
	   background-color: #f1f1f1;
	   color:#999;
   }
   .Continue{
	   background-color: var(--color);
	   color:#ffffff;
   }
</style>
